<template>
  <swiper class="gg-banner" v-bind:style="ggBannerStyle" :indicator-dots="indicatorDots" indicator-color="rgba(255, 255, 255, .6)"
    indicator-active-color="#ffffff" :autoplay="autoplay" :circular="circular" :previous-margin="margin" :next-margin="margin" @change="onChange">
    <swiper-item v-for="(item,index) in localDataLists" :key="index">
      <view class="gg-banner-swiper-item">
        <view class="gg-banner-swiper-item-box">
          <image class="gg-banner-swiper-item-image" :src="item.image" mode="aspectFill" />
          <view class="gg-banner-swiper-item-text" v-if="item.text">
            {{item.text}}
          </view>
        </view>
      </view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  name: "GgBanner",
  options: {
    addGlobalClass: true,
  },
  props: {
    dataLists: {
      type: Array,
      default: []

    },
    paramConfig: {
      type: Object,
      default() {
        return {}
      }
    },
    height: {
      type: Number,
      default: 160
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    indicatorDots: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    dataLists(newVal) {
      this._dealDataLists();
    },
    height() {
      this._dealStyle();
    }
  },
  data() {
    return {
      localDataLists: [],
      circular: true,
      margin: '0px',
      ggBannerStyle: '',/* 轮播图区域的样式 */
    };
  },
  created: function () {
    this._dealDataLists();
    this._dealStyle();
  },
  methods: {
    _dealDataLists() {
      let localDataLists = [];
      const paramImage = this.paramConfig.image || 'image',
        paramText = this.paramConfig.text || 'text';
      this.dataLists.forEach(element => {
        localDataLists.push({
          image: element[paramImage],
          text: element[paramText]
        })
      });
      this.localDataLists = localDataLists;
    },
    _dealStyle() {
      this.ggBannerStyle = 'height:' + this.height + 'px;'
    },
    onChange(e) {
      this.$emit('change', e);
    }
  }
};
</script> 
<style >
.gg-banner {
  width: 100%;
}
.uni-swiper-item {
  height: 100%;
}
.gg-banner-swiper-item {
  height: 100%;
}
.gg-banner-swiper-item-box {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.gg-banner-swiper-item-image {
  height: 100%;
  width: 100%;
}
.gg-banner-swiper-item-text {
  font-size: 14px;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  width: calc(100% - 30px);
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
</style>
